<template>
	<view>
		
		<u-cell-group>
			<view v-for="(item, index) in list" :key="index">
				<u-cell-item :arrow="false" :border-bottom="false" :title="item.PhotoTitle" >
					<view class="u-flex-col u-col-bottom">
						<u-upload   
						:show-progress="false" 
						:width="240" :height="200"
						:file-list="item.defaultFileList"
						:preview-full-image="true"
						:multiple="false"
						:index="item.Key"
						@on-choose-complete="onFileChange" 
						@on-remove="onRemoveFile"
						:auto-upload="false"
						:max-count="1"></u-upload>
					</view>
				</u-cell-item>
				<u-cell-item :arrow="false" style="padding: 10rpx 20rpx;" :border-bottom="false">
					<view class="u-font-10" style="text-align: left;line-height: 35rpx;">{{item.Photographing}}</view>
				</u-cell-item>
			</view>
		</u-cell-group>
		
	</view>
</template>

<script>
	export default {
		name:"store-photo-form",
		data() {
			return {
				list: []
			};
		},
		
		methods: {
			initPhotoList(data) {
				if(data) {
					this.list = data;
					this.list.forEach(item => {
						const defaultFileList = [];
						if(item.Value) {
							defaultFileList.push({
								url: this.$getImageUrl(item.Value)
							})
						}
						this.$set(item, 'defaultFileList', defaultFileList)
					})
				}
			},
			
			onFileChange(files, name) {
				const currentFile = this.list.find(item => item.Key == name)
				this.$fileUpload(files[0].file).then(res => {
					currentFile.Value = res.key;
				});
			},
			
			onRemoveFile(index, files, name) {
				const currentFile = this.list.find(item => item.Key == name)
				currentFile.Value = '';
				currentFile.defaultFileList = [];
			}
		}
		
		
	}
</script>

<style lang="scss">

</style>
